.navigation-container{
    display: flex;
    width: 100%;
    background-color: #E3E6E8;
    .tab-header{
        display: flex;
        width: 56px;
        padding-bottom: 10px;
        padding-top: 8px;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;
        border-right: 1px solid #E3E6E8;
        position: relative;
        .tab-item{
            display: flex;
            width: 40px;
            height: 40px;
            border-radius: 4px;
            padding: 6px;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            box-sizing: border-box;
            &:hover{
                background: #D9D9D9;
            }
        }

        .tab-item.active{
            background: #D9D9D9;
            & svg{
                fill: var(--cui-primary-color5);
            }
        }

        .tab-item.last{
            position: absolute;
            bottom: 10px;
        }
    }


    .tab-content{
        flex: 1;
        overflow: hidden;
    }

    .tab-hide{
        width: 0;
        height: 0;
        overflow: hidden;
        flex: 0;
    }
}

.navigation-container-dark{
    background-color: #464E53;
    .tab-header{
        border-right: 1px solid #464E53;
        .tab-item:hover{
            background: #5E686E;
        }
        .tab-item.active{
            background: #5E686E;
        }
    }
}

.navigation-container-ground{
    .tab-header{
        .tab-item{
            border-radius: 20px;
        }
    }
}